import React from 'react';
import { Card, Typography, Grid, Statistic } from '@arco-design/web-react';
import { IconUser, IconPlus, IconCheck, IconExclamation } from '@arco-design/web-react/icon';
import { useTranslation } from 'react-i18next';
import './Dashboard.css';

const { Title } = Typography;
const { Row, Col } = Grid;

const Dashboard: React.FC = () => {
  const { t } = useTranslation();

  return (
    <div className="dashboard-page">
      <Title heading={3}>{t('dashboard.title')}</Title>
      
      <Row gutter={20} className="dashboard-stats">
        <Col span={6}>
          <Card className="stat-card">
            <Statistic 
              title={t('dashboard.totalUsers')} 
              value={1234} 
              prefix={<IconUser />} 
              groupSeparator 
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card className="stat-card">
            <Statistic 
              title={t('dashboard.newToday')} 
              value={56} 
              prefix={<IconPlus />} 
              precision={0}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card className="stat-card">
            <Statistic 
              title={t('dashboard.systemHealth')} 
              value={98} 
              suffix="%" 
              prefix={<IconCheck />} 
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card className="stat-card">
            <Statistic 
              title={t('dashboard.pendingTasks')} 
              value={24} 
              prefix={<IconExclamation />} 
              precision={0}
            />
          </Card>
        </Col>
      </Row>
      
      <Card className="recent-activity">
        <Title heading={5}>{t('dashboard.recentActivity')}</Title>
        <div className="activity-list">
          <div className="activity-item">
            <div className="activity-icon">
              <IconUser />
            </div>
            <div className="activity-content">
              <Typography.Text bold>{t('dashboard.newUserRegistration')}</Typography.Text>
              <Typography.Text type="secondary">2分钟前</Typography.Text>
            </div>
          </div>
          <div className="activity-item">
            <div className="activity-icon">
              <IconPlus />
            </div>
            <div className="activity-content">
              <Typography.Text bold>{t('dashboard.systemUpdate')}</Typography.Text>
              <Typography.Text type="secondary">15分钟前</Typography.Text>
            </div>
          </div>
          <div className="activity-item">
            <div className="activity-icon">
              <IconExclamation />
            </div>
            <div className="activity-content">
              <Typography.Text bold>{t('dashboard.securityWarning')}</Typography.Text>
              <Typography.Text type="secondary">1小时前</Typography.Text>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default Dashboard;